<template>
	<view>
		
		<view class="cu-bar search bg-white fixed">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" v-model="param.title" placeholder="输入关键词搜索"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-blue round" @click="onSearch">搜索</button>
			</view>
		</view>
		
		<view class="padding-sm" style="margin-top: 50px;">		
			<view class="flex flex-direction flex-gap-sm" v-if="articleList.length>0"  >
				<view class="flex flex-gap-sm padding-sm radius2  animation-slide-bottom bg-white" style="animation-delay: 1s"
					v-for="item in articleList" :key="item.id" @click="toDetail(item.id)">
					<img :src="item.cover.url"style="width: 120px;height: 80px;border-radius: 2px;" />
					<view class="flex-sub flex flex-direction justify-between">
						<text class="text-df justify-between text-black">{{item.title}}</text>
						<view class="flex flex-gap-xs">
							<text class="cu-tag sm light bg-blue" v-for="(item,index) in item.tags">{{item}}</text>
						</view>
						<view class="flex align-center justify-between text-grey">
							<text v-if="item.price===0" class="text-green">免费</text>
							<text v-else class="text-orange">{{item.price}}金豆</text>
							<text><text class="cuIcon-attention margin-right-xs"></text> {{item.viewCount}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view v-else class="flex align-center justify-center flex-gap-sm flex-direction" style="height: 500px;">
				<image src="/static/images/empty.png" style="width: 200px;height: 100px;"></image>
				<text class="text-grey">暂无数据</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import articleApi from "@/api/articleApi.js"

	export default {
		data() {
			return {
				articleList: [],
				param: {
					title: null,
					columnId: null,
					size: 20,
					current: 1
				},
			};
		},
		onLoad(option) {
			this.param.columnId = option.id
		},
		onShow() {
			this.getData()
		},
		onReachBottom() {
			this.param.current += 1
			articleApi.page(this.param).then(res => {
				if(res.data.records.length > 0){
					this.articleList.push(...res.data.records)
				}else{
					this.param.current -= 1
					uni.showToast({
						title: '没有更多了~',
						icon: 'none'
					})
				}
			})
		},
		methods: {
			getData() {
				articleApi.page(this.param).then(res => {
					this.articleList = res.data.records
				})
			},
			onSearch() {
				this.param.current = 1
				this.getData()
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			}
		},
	}
</script>

<style lang="scss">
	.cu-bar.fixed, .nav.fixed{
		box-shadow: none;
	}
</style>